<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="../css/initial.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
<header>
    <div class="header-line"></div>
</header>
<div class="content">
    <!--<img class="content-logo" src="img/form_logo.png" alt="logo">-->
    <h1 class="content-title">登录</h1>
    <div class="content-form">
        <form method="post" action="" onsubmit="return submitTest()">
            <div id="change_margin_1">
                <input class="user" type="text" name="user" placeholder="请输入用户名" onblur="oBlur_1()" onfocus="oFocus_1()">
            </div>
            <!-- input的value为空时弹出提醒 -->
            <p id="remind_1"></p>
            <div id="change_margin_2">
                <input class="password" type="password" name="password" placeholder="请输入密码" onblur="oBlur_2()" onfocus="oFocus_2()">
            </div>
            <!-- input的value为空时弹出提醒 -->
            <p id="remind_2"></p>
            <div id="change_margin_3">
                <input class="content-form-signup" type="submit" value="登录">
            </div>
        </form>
    </div>
    <div class="content-login-description">没有账户？</div>
    <div><a class="content-login-link" href="sign_up.html">注册</a></div>
</div>
<script>
    // 全局变量a和b，分别获取用户框和密码框的value值
    var a = document.getElementsByTagName("input")[0].value;
    var b = document.getElementsByTagName("input")[1].value;

    //用户框失去焦点后验证value值
    function oBlur_1() {
        if (!a) { //用户框value值为空
            document.getElementById("remind_1").innerHTML = "请输入用户名！";
            document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
        } else { //用户框value值不为空
            document.getElementById("remind_1").innerHTML = "";
            document.getElementById("change_margin_1").style.marginBottom = 19 + "px";
        }
    }

    //密码框失去焦点后验证value值
    function oBlur_2() {
        if (!b) { //密码框value值为空
            document.getElementById("remind_2").innerHTML = "请输入密码！";
            document.getElementById("change_margin_2").style.marginBottom = 1 + "px";
            document.getElementById("change_margin_3").style.marginTop = 2 + "px";
        } else { //密码框value值不为空
            document.getElementById("remind_2").innerHTML = "";
            document.getElementById("change_margin_2").style.marginBottom = 19 + "px";
            document.getElementById("change_margin_3").style.marginTop = 19 + "px";
        }
    }

    //用户框获得焦点的隐藏提醒
    function oFocus_1() {
        document.getElementById("remind_1").innerHTML = "";
        document.getElementById("change_margin_1").style.marginBottom = 19 + "px";
    }

    //密码框获得焦点的隐藏提醒
    function oFocus_2() {
        document.getElementById("remind_2").innerHTML = "";
        document.getElementById("change_margin_2").style.marginBottom = 19 + "px";
        document.getElementById("change_margin_3").style.marginTop = 19 + "px";
    }

    //若输入框为空，阻止表单的提交
    function submitTest() {
        if (!a && !b) { //用户框value值和密码框value值都为空
            document.getElementById("remind_1").innerHTML = "请输入用户名！";
            document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
            document.getElementById("remind_2").innerHTML = "请输入密码！";
            document.getElementById("change_margin_2").style.marginBottom = 1 + "px";
            document.getElementById("change_margin_3").style.marginTop = 2 + "px";
            return false; //只有返回true表单才会提交
        } else if (!a) { //用户框value值为空
            document.getElementById("remind_1").innerHTML = "请输入用户名！";
            document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
            return false;
        } else if (!b) { //密码框value值为空
            document.getElementById("remind_2").innerHTML = "请输入密码！";
            document.getElementById("change_margin_2").style.marginBottom = 1 + "px";
            document.getElementById("change_margin_3").style.marginTop = 2 + "px";
            return false;
        }
    }
</script>

</body>


</html>